import React from 'react';
import { Input, AutoComplete } from 'antd';
import './SearchBar.css';
import '../TabBar/iconfont/iconfont.css';
import {useNavigate} from "react-router-dom";
const { Search } = Input;
const Data=[
    {
        id:1.1,
        name:'相机',
    },
    {
        id:1.2,
        name:'笔记本电脑',
    },
    {
        id:1.3,
        name:'平板电脑',
    },
    {
        id:1.4,
        name:'耳机',
    },
    {
        id:1.5,
        name:'鼠标',
    },
    {
        id:1.6,
        name:'键盘',
    },
    {
        id:2.1,
        name:'小米',
    },
    {
        id:2.2,
        name:'华为',
    },
    {
        id:2.3,
        name:'苹果',
    },
    {
        id:2.4,
        name:'vivo',
    },
    {
        id:2.5,
        name:'oppo',
    },
    {
        id:2.6,
        name:'三星',
    },
    {
        id:3.1,
        name:'洗衣机',
    },
    {
        id:3.2,
        name:'冰箱',

    },
    {
        id:3.3,
        name:'微波炉',

    },
    {
        id: 3.4,
        name: '燃气灶'
    },
    {
        id:3.5,
        name:'空调',

    },
    {
        id:3.6,
        name:'电饭煲',

    }

];

const SearchBar = () => {
    const options = Data.map(item => ({ value: item.name }));
    const navigate = useNavigate();
    const onSearch = (value, _e, info) =>{
        console.log(info?.source, value);
        const matchedItem = Data.find(item => item.name.includes(value));  //包含
        // const matchedItem = Data.find(item => item.name === value);// 相等

        if (matchedItem) {
            navigate(`/subCategoryProduct/${matchedItem.id}`);
        } else {
          alert('该分类没有找到')
        }
    }

    return(
    <>

        <div className="searchBar">
            <AutoComplete className='searchInput'

                options={options}
                placeholder="搜索小分类"
                filterOption={ (inputValue, option) =>
                    option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                }
            >
                <Input.Search enterButton  onSearch={onSearch} />
            </AutoComplete>
        </div>
        </>
    );
};

export default SearchBar;